<template>
  <div>
    <common-head :title="$route.name" />
    <div class="wrap">
      <!-- 排序栏 -->
      <div class="order-bar">
        <div
          @click="switchOrder(0)"
          :class="[
            'order',
            'sale',
            {
              active: order.by === 0,
            },
          ]"
        >
          销量
        </div>
        <div
          @click="orderByPrice"
          :class="[
            'order',
            'price',
            {
              active: order.by === 1,
            },
          ]"
        >
          <span> 价格 </span>
          <div
            :class="[
              'angle',
              'up',
              {
                active: order.upDown === 0 && order.by === 1,
              },
            ]"
          ></div>
          <div
            :class="[
              'angle',
              'down',
              {
                active: order.upDown === 1 && order.by === 1,
              },
            ]"
          ></div>
        </div>
        <div
          @click="switchOrder(2)"
          :class="[
            'order',
            'new',
            {
              active: order.by === 2,
            },
          ]"
        >
          新品
        </div>
      </div>
      <!-- /排序栏 -->
      <!-- 商品列表 -->
      <div class="items-wrap">
        <div
          class="item"
          @click="enterDetail(item.id)"
          v-for="item in items"
          :key="item.id"
        >
          <img class="item-pic" :src="item.pic" alt="" />
          <div class="item-info">
            <h5 class="name">{{ item.name }}</h5>
            <p class="desc">
              {{ item.characteristic ? item.characteristic : "暂无描述" }}
            </p>
            <div class="action">
              <p class="price">￥{{ item.minPrice }}</p>
              <van-icon
                size="24"
                color="#ff734c"
                name="jiarugouwuche"
                class-prefix="icon"
              ></van-icon>
            </div>
          </div>
        </div>
      </div>
      <!-- /商品列表 -->
    </div>
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import { fetchItems } from '@api'
export default {
  data () {
    return {
      order: {
        by: 0, // 0销量排序 1价格排序 2发布时间排序
        upDown: 1 // 0升序 1降序
      },
      items: []
    }
  },
  created () {
    this.fetchItems()
  },
  methods: {
    enterDetail (id) {
      // 进入详情页
      this.$router.push(`/detail/${id}`)
    },
    fetchItems () {
      fetchItems({
        k: this.$route.query.word,
        orderBy: this.orderBy
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.result
        }
      })
    },
    switchOrder (by) {
      // 切换销量和新品
      this.order.by = by

      this.fetchItems()
    },
    orderByPrice () {
      /*
       1 此时不是按照价格排序（销量或者新品），变成默认 价格的降序
       2 此时就是按照价格排序 点击 切换升序还是降序
      */
      if (this.order.by !== 1) {
        // 按照销量或新品排序
        this.order.by = 1
        this.order.upDown = 1
      } else {
        if (this.order.upDown === 0) {
          this.order.upDown = 1
        } else {
          this.order.upDown = 0
        }
      }
      this.fetchItems()
    }
  },
  computed: {
    orderBy () {
      let orderBy = 'ordersDown'
      switch (this.order.by) {
        case 0:
        //  按照销量降序排序
          orderBy = 'ordersDown'
          break
        case 1:
          if (this.order.upDown === 0) {
            orderBy = 'priceUp'
          } else {
            orderBy = 'priceDown'
          }
          break
        case 2:
          orderBy = 'addedDown'
          break
        default:
          break
      }
      return orderBy
    }
  },
  components: { CommonHead },
  name: 'ItemLists'
}
</script>

<style lang="scss" scoped>
.wrap {
  padding-top: 46px;
  .order-bar {
    height: 50px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .order {
      font-size: 14px;
      color: #333;
      &.active {
        color: #ff734c;
      }
      &.price {
        position: relative;
        .angle {
          width: 0;
          height: 0;
          border: 6px solid transparent;
          position: absolute;
          right: -15px;
          &.up {
            border-bottom-color: #333;
            top: -2px;
            &.active {
              border-bottom-color: #ff734c;
            }
          }
          &.down {
            border-top-color: #333;
            top: 12px;
            &.active {
              border-top-color: #ff734c;
            }
          }
        }
      }
    }
  }
   .items-wrap{
    padding:0 5px;
    .item{
      display: flex;
      border-radius: 8px;
      background-color: #fff;
      overflow: hidden;
      margin-top: 5px;
      img.item-pic{
        width: 4.5rem;
      }
      .item-info{
        flex:1;
        padding-left:8px;
        padding-right:15px;
        .name{
          color: #333;
          font-size: 16px;
          line-height: 40px;
        }
        .desc{
          color: #666;
          font-size: 14px;
          line-height: 20px;
          width: 4.5rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .action{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .price{
            color: #333;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
